﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>任务一：零基础HTML编码</title>
	</head>
	<body>
		
		<h1>网站一级标题</h1>
		<ul>
			<li><a href="#">导航连接一</a></li>
			<li><a href="#">导航连接二</a></li>
			<li><a href="#">导航连接三</a></li>
			<li><a href="#">导航连接四</a></li>
		</ul>
		<h2>文章一级标题</h2>
		<h4>文章二级标题</h4>
		<div>文章作者际发表时间</div>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，</p>
		<br />
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com/">连接到百度前端技术学院</a>这是一个很长的段落，一个很长的段落，这是一个很长的一个很长的段落，这是一个很长的这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="这是一个图片描述">
		<p>这是一个很长的段落，这是一个很长的段一个很长的段落，这是一个很一个很长的段落，这是一个很落，这是一个很长的段落，<a href="http://ife.baidu.com/" target="_blank">新窗口连接到百度前端技术学院</a>这是一个很长的段落，一个很长的段落，这是一个很长的一个很长的段落，这是一个很长的这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<h2>另一篇文章一级标题</h2>
		<h4>文章二级标题</h4>
		<div>文章作者&nbsp;际发表时间</div>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，</p>
		<br />
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com/">连接到百度前端技术学院</a>这是一个很长的段落，一个很长的段落，这是一个很长的一个很长的段落，这是一个很长的这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="这是一个图片描述">
		<ul>
			<li>列表项目一</li>
			<li>列表项目二</li>
			<li>列表项目三</li>
		</ul>	
		<h4>图片</h4>
		<div><span>好看的图片</span><br /><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="好看的图片"></div>
		<br />
		<div><span>好看的图片</span><br /><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="好看的图片"></div>
		<br />
		<div><span>好看的图片</span><br /><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="好看的图片"></div>
		<br />
		<div><span>好看的图片</span><br /><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="好看的图片"></div>
		<br />
		<div><span>好看的图片</span><br /><img src="http://n.sinaimg.cn/news/transform/20160315/EivN-fxqhwtu7751549.jpg" alt="好看的图片"></div>
		<br />
		<h2>最后文章一级标题</h2>
		<h4>文章二级标题</h4>
		
		<div>文章作者&nbsp;文章发表时间</div>
		<ol>
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol>
		<div>下面是一个表格，给表哥添加一个border="1"好让你看出是一个表格</div>
		<table width="400" border="1">
			  <tr>
			    <td width="180">表头</td>
			    <td width="180">表头</td>
			    <td width="40">表头</td>
			  </tr>
			  <tr>
			    <td width="180">表内容单元格</td>
			    <td width="180">表内容单元格</td>
			    <td width="40"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="180">表内容单元格</td>
			    <td width="180">表内容单元格</td>
			    <td width="40"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="180">表内容单元格</td>
			    <td width="180">表内容单元格</td>
			    <td width="40"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="180">表内容单元格</td>
			    <td width="180">表内容单元格</td>
			    <td width="40"><a href="#">操作</a></td>
			  </tr>
			  <tr>
			    <td width="180">总计</td>
			    <td width="180">1000</td>
			      <td>&nbsp;</td>
			  </tr>
		</table>
		
		<h2>这里是一个标题栏，标题栏</h2>
		<h3>侧栏注册窗口</h3>
		
		<br /><br />
		<form id="form1" name="form1" method="post" action="">
			<div>请输入邮箱地址：<input name="" type="text"   placeholder="这是一个文本输入框"/></div>
			<p>邮箱地址请安要求输入</p>
			<div>请输入邮箱地址：<input name="" type="text"  placeholder="这是一个文本输入框"/></div>
			<div>
			抢输入密码：<input name="" type="password"  placeholder="这是一个文本输入框"/>请重复输入密码：<input name="" type="password"  placeholder="这是一个文本输入框"/></div>
			<p>密码请设为6-16位英文数字</p>
	
			<div>
				性别：<label><input type="checkbox" name="title" value="nan" id="title_0" />男</label>
				  	<label> <input type="checkbox" name="title" value="nv" id="title_1" />女</label>
				  	<br />
				城市:<select name="ddlOther" id="ddlOther">
						<optgroup label="请选择">
							<option value="0">北京</option>
							<option value="0">上海</option>
							<option value="0">深圳</option>
						</optgroup>
					</select>
				    
				   <br />
			   		  <input name="" type="checkbox" value="" /><span>运动</span>
			         <input name="" type="checkbox" value="" /><span>艺术</span>
			          <input name="" type="checkbox" value="" /><span>科学</span>
			       <p> 个人描述：<textarea name="" cols="" rows="" placeholder="这是一个多行输入框，输入您的表述"></textarea></p>
			
			</div>
			  </form>


		
		
		
	</body>
</html>